<template>
  <div class="row">
    <span class="col-xs-6 col-sm-6 col-md-6 button" @click="collectGoods">
    	<i class="iconfont ico-shoucang" :class="{selected: isCollected}"></i> 收藏商品
    </span>
    <!-- <span class="col-xs-6 col-sm-6 col-md-6 button">
      <i class="icon icon-phone"></i> 手机下单
    </span> -->
  </div>
</template>

<script>
// 导入收藏模块
import { apiFavoriteGoods } from './../../../common/api.js'

export default {
  props: {
    collected: {
      type: Number,
      default: 0
    },
    selected: false
  },
  data() {
    return {
      isCollected: false
    }
  },
  watch: {
    collected() {
      this.isCollected = (this.collected == 1)
    }
  },
  methods: {
    collectGoods() {
      // 商品id
      let goodsId = this.$route.params.id

      // 当前登录的token
      let token = this.$store.getters.token

      // 请求接口，加载收藏商品
      apiFavoriteGoods(token, goodsId).then((data) => {
        // 不展示收藏商品的状态
        this.isCollected = false

        // 如果当前点击的是收藏商品
        if (data.deleteStatus == 0) {
          this.$toast('收藏商品成功')
          this.isCollected = true
          return
        }
        this.$toast('取消收藏')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.button {
  color: #a8a8a8;
  cursor: pointer;
  font-size: 14px;
  font-weight: 200;
  margin-left: 34px;
}
.iconfont {
  color: #a8a8a8;

  &.selected {
    color: #F00384;
  }
}
</style>